import React from 'react'
import PropTypes from 'prop-types'
import { Table, Modal } from 'antd'
import classnames from 'classnames'
import { DropOption } from 'components'
import { Link } from 'react-router-dom'
import queryString from 'query-string'
import styles from './List.less'

const confirm = Modal.confirm

const List = ({ onDeleteItem, onEditItem, location, ...tableProps }) => {
  location.query = queryString.parse(location.search)

  const handleMenuClick = (record, e) => {
    if (e.key === '1') {
      onEditItem(record)
    } else if (e.key === '2') {
      confirm({
        title: 'Are you sure delete this record?',
        onOk () {
          onDeleteItem(record.id)
        },
      })
    }
  }

  const columns = [
    {
      title: 'ORDER_NO',
      dataIndex: 'ORDER_NO',
      key: 'ORDER_NO',
      render: (text, record) => <Link to={`user/${record.ID}`}>{text}</Link>,
    },
    {
      title: 'CUSTOMER_NAME',
      dataIndex: 'CUSTOMER_NAME',
      key: 'CUSTOMER_NAME',

    }, {
      title: 'CUSTOMER_TYPE',
      dataIndex: 'CUSTOMER_TYPE',
      key: 'CUSTOMER_TYPE',
    },
    {
      title: 'STATE',
      dataIndex: 'STATE',
      key: 'STATE',
    },{
      title: 'ISVERIFY',
      dataIndex: 'ISVERIFY',
      key: 'ISVERIFY',
      render: (text, record) => {
        if (record.ISVERIFY === '1') {
          return 'Verified'
        } else {
          return 'unVerify'
        }
      },
    }, {
      title: 'Operation',
      key: 'operation',
      width: 100,
      render: (text, record) => {
        return <DropOption onMenuClick={e => handleMenuClick(record, e)} menuOptions={[{ key: '1', name: 'Update' }, { key: '2', name: 'Delete' }]} />
      },
    },
  ]


  return (
    <div>
      <Table
        {...tableProps}
        className={classnames({ [styles.table]: true })}
        bordered
        scroll={{ x: 700 }}
        columns={columns}
        simple
        rowKey={record => record.ID}
      />
    </div>
  )
}

List.propTypes = {
  onDeleteItem: PropTypes.func,
  onEditItem: PropTypes.func,
  location: PropTypes.object,
}

export default List
